body {
	@extend %content-font;
	font-family: $serif;
	font-size: $font-body;
	line-height: 1.7;
	margin-top: 32px;
	margin-bottom: 72px;

	&.is-gutenberg {
		margin-bottom: 32px;
	}
}

p {
	margin: 0 0 24px;

	.mce-content-body & {
		/* To override lightgray/content.min.css */
		line-height: inherit;
	}

	&:last-child {
		margin-bottom: 0;
	}
}

blockquote,
q {
	hyphens: none;
	quotes: none;
}
a:link,
a:visited,
a:hover,
a:active {
	color: var( --color-accent );
}

code {
	font-family: $code;
	padding: 1px 4px;
	border-radius: 2px;
}

pre {
	background: var( --color-neutral-0 );
	font-family: $code;
	padding: 8px;
	overflow-x: auto;

	code {
		background: none;
		padding: 0;
	}
}

// Images and captions
img {
	max-width: 100%;
	height: auto;
}
a img {
	border: 0;
}

.ios img {
	-webkit-user-select: none;
}

.alignleft {
	margin: 16px 16px 16px 0;
}
.alignright {
	margin: 16px 0 16px 16px;
}

.html5-captions .wp-caption {
	background: none;
	box-sizing: border-box;
	border: none;
	margin-bottom: 16px;
	max-width: 100%;
	padding-top: 0;

	&.alignleft {
		margin-right: 16px;
	}

	&.alignright {
		margin-left: 16px;
	}
}

.wp-caption-dt {
	overflow: hidden;
}

/* iOS does not obey max-width if width is set. */
.ios .wp-caption {
	width: auto !important;
}

.wp-caption img {
	display: block;
	margin: 0;
}

.wp-caption-dd {
	background: var( --color-neutral-0 );
	color: var( --color-neutral-50 );
	font-size: $font-body-small;
	line-height: 1.7;
	padding: 16px;
}

.wpview-body::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: default;

	.wpview-wrap[data-mce-selected] & {
		display: none;
	}
}

.wpview-wrap iframe {
	display: block;
	width: 100%;
}

blockquote {
	padding: 16px;
	margin: 8px 0 24px;
	border-left: 2px solid var( --color-neutral-light );
	color: var( --color-neutral-50 );
	background: var( --color-neutral-0 );
}

caption,
th,
td {
	font-weight: 400;
	text-align: left;
}
table,
th,
td {
	border: 1px solid var( --color-neutral-10 );
}
table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}
caption,
th,
td {
	font-weight: 400;
	text-align: left;
}
th {
	border-width: 0 1px 1px 0;
	font-weight: 600;
}
td {
	border-width: 0 1px 1px 0;
}
th,
td {
	padding: 0.4em;
}

.mce-item-table,
.mce-item-table td,
.mce-item-table th,
.mce-item-table caption {
	border: 1px solid var( --color-neutral-10 );
}

hr {
	border: 0;
	height: 1px;
	margin: 8px 0;
	background: var( --color-neutral-10 );
}

/* Styles for formatting the boundaries of anchors and code elements */
.mce-content-body a[data-mce-selected] {
	padding: 0 2px;
	margin: 0 -2px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba( var( --color-primary-rgb ), 0.2 );
	background: rgba( var( --color-primary-rgb ), 0.2 );
	color: var( --color-primary-dark );
}

.mce-content-body code {
	padding: 2px 4px;
	margin: 0;
	border-radius: 2px;
	color: var( --color-neutral-70 );
	background: var( --color-neutral-0 );
}

.mce-content-body code[data-mce-selected] {
	background: var( --color-neutral-10 );
}
